<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>form</title>
    <!-- 引入样式 -->
    <link href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" rel="stylesheet">
    <style>
        /* 树的样式 */

        .el-tree {
            padding: 10px;
            border: 2px solid;
            margin: 10px 0;
            border-radius: 5px;
        }

        .custom-tree-node {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 14px;
            padding-right: 8px;
        }
    </style>
</head>

<body>
    <div id="app">
        <el-row>
            <el-col :span="12" :offset="6">
                <div>
                    <el-button @click="dialogFormVisible = true" type="primary" style="width: 100%">添加第一层目录</el-button>
                    <el-tree :data="data" node-key="id" default-expand-all :expand-on-click-node="false">
                        <span class="custom-tree-node" slot-scope="{ node, data }">
                            <span>
                                <span>{{ data.name }}</span>
                                <span>{{ data.key }}</span>
                            </span>
                            <span>
                                <el-button type="text" class="el-icon-plus" size=" mini " @click="()=> append(data)">
                                    添加
                                </el-button>
                                <el-button type="text" class="el-icon-edit" size="mini" @click="() => edit(node, data)">
                                    修改
                                </el-button>
                                <el-button type="text" class="el-icon-delete" size="mini" @click="() => remove(node, data)">
                                    删除
                                </el-button>
                            </span>
                        </span>
                    </el-tree>
                </div>

                <el-form label-width="80px">
                    <el-form-item label="请求接口">
                        <el-input type="url" v-model="url" placeholder="例子:https://example.com"></el-input>
                    </el-form-item>
                </el-form>

            </el-col>
        </el-row>

        <!-- 添加节点的模态框 -->
        <el-dialog title="添加节点" width="30%" center :visible.sync="dialogFormVisible">
            <el-form :model="form" :rules="rules" ref="form" label-width="100px">
                <el-form-item label="中文名称" prop="name">
                    <el-input v-model="form.name" placeholder="请输入中文名称"></el-input>
                </el-form-item>
                <el-form-item label="字段名称" prop="key">
                    <el-input v-model="form.key" placeholder="请输入字段名称"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button @click="dialogFormVisible = false">取消</el-button>
                    <el-button @click="resetForm('form')">重置</el-button>
                    <el-button type="primary" @click="submitForm">添加</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>

    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script>
        var id = 1000;
        new Vue({
            el: '#app',
            data() {
                return {
                    dialogFormVisible: false,
                    // 表单添加
                    form: {
                        name: '',
                        key: '',
                    },
                    rules: {
                        name: [{
                                required: true,
                                message: '请输入中文名称',
                                trigger: 'blur'
                            },
                            {
                                pattern: /^[\u2E80-\u9FFF]+$/,
                                message: '请输入正确的汉字格式'
                            }
                        ],
                        key: [{
                            required: true,
                            message: '请输入字段名称',
                            trigger: 'blur'
                        }
                        ],
                    },
                    url: '', //接口地址
                    data: [
                        //     {
                        //     name: '姓名',
                        //     key: 'name',
                        //     children: [
                        //         {
                        //         name: '姓名',
                        //         key: 'name',
                        //         children: [{
                        //             key: 'name',
                        //             name: '姓名',
                        //         }, {
                        //             name: '姓名',
                        //             key: 'name',
                        //         }]
                        //     }]
                        // }, {
                        //     name: '姓名',
                        //     key: 'name',
                        //     children: [{
                        //         name: '姓名',
                        //         key: 'name',
                        //     }, {
                        //         name: '姓名',
                        //         key: 'name',
                        //     }]
                        // }, {
                        //     name: '姓名',
                        //     key: 'name',
                        //     children: [{
                        //         name: '姓名',
                        //         key: 'name',
                        //     }, {
                        //         name: '姓名',
                        //         key: 'name',
                        //     }
                        //     ]
                        // }
                    ],
                    parentNode: 0,
                    selectNode: {}
                }
            },
            methods: {
                // 添加第一层
                addOne() {
                    let self = this;
                    self.form = {
                        name: '',
                        key: '',
                    };
                    self.dialogFormVisible = true;
                    self.parentNode = 0;
                    self.selectNode = []
                },
                // 重置表单
                resetForm(formName) {
                    this.$refs[formName].resetFields();
                },
                // 添加表单
                submitForm(formName) {
                    let self = this;
                    let data = Object.assign({
                        id: id++
                    }, self.form)
                    if (self.parentNode == 0) {
                        self.data.push(data)
                    } else if (self.parentNode == 1) {
                        if (!self.selectNode.children) {
                            self.$set(self.selectNode, 'children', []);
                        }
                        self.selectNode.children.push(data);
                    } else {
                        self.$set(self.selectNode, 'name', data.name);
                        self.$set(self.selectNode, 'key', data.key);
                        // self.selectNode = {
                        //     name: data.name,
                        //     key: data.key
                        // }
                    }
                    self.form = {
                        name: '',
                        key: ''
                    };
                    self.dialogFormVisible = false;
                    self.$notify({
                        title: '提示',
                        message: '保存成功!',
                        type: 'success'
                    });
                },
                append(data) {
                    let self = this;
                    self.dialogFormVisible = true;
                    this.parentNode = 1;
                    this.selectNode = data;
                    console.log(this.selectNode)
                },

                remove(node, data) {
                    const parent = node.parent;
                    const children = parent.data.children || parent.data;
                    const index = children.findIndex(d => d.id === data.id);
                    children.splice(index, 1);
                },
                edit(node, data) {
                    let self = this;
                    self.dialogFormVisible = true;
                    this.parentNode = 2;
                    this.selectNode = data;
                    this.form = {
                        name: data.name,
                        key: data.key
                    }
                }
            }
        })
    </script>
</body>

</html>